
<template>
  <div class="container">
<!-- begin   -->
  <div class="row">
    <div class="col-lg-8">
      <!-- begin 身份卡  -->
      <el-card >
        <div class="row">
          <div class="col-8" >
            <div class="row align-items-center" >
              <div class="col-auto">
                <el-avatar :size="70"  :src="store.avatar" class="">
                </el-avatar>
              </div>
              <div class="col-lg" >
                <div class="m-1" ><span style="font-weight: bolder">{{store.nickName}}</span>  </div>
                <div class="m-1" ><span>{{store.email}}</span> </div>
                <div class="m-1" > <span style="color: #8a8a8a; font-size: 16px" > {{store.remark}}</span> </div>
              </div>
            </div>
          </div>
          <div class="col-4" style="display: flex;align-items: center;justify-content: center;" >
              <el-button  type="primary" v-if="store.user.admin" @click="$router.push('/index/article/publish')" >去写文章吧！</el-button>
              <el-button type="primary" v-else> 申请成为创作者 </el-button>
          </div>
        </div>
      </el-card>
      <!-- end -->
      <!-- begin  选项框 -->
      <div class="" style="margin-top:25px" >
        <div class="">
          <el-button size="small" @click="state.display=1" > 我的信息 </el-button>
          <el-button size="small" @click="state.display=2" > 文章 </el-button>
          <el-button size="small" @click="state.display=3" > 收藏 </el-button>
          <el-button size="small" @click="state.display=4" > 点赞 </el-button>
        </div>
      </div>
      <!-- end -->
      <!-- begin 信息框  -->
      <div class="" style="margin-top:15px;margin-bottom:25px; padding: 10px " >
        <Transition name="fade" mode="out-in" >
          <component :is="method.changeComponent(state.display)" ></component>
        </Transition>
      </div>
      <!-- end -->

    </div>
    <div class="col-lg-4">
      <el-card class="col-lg">
        <div class="card-header mb-4">
          <div style="font-weight: bolder">欢迎您访问本站，请您阅读以下内容</div>
        </div>
        <el-collapse v-model="state.activeNames" >
          <el-collapse-item title="本站协议" name="1">
            <p style="text-align: start;"><strong>本站声明：本站只用于学习，不进行任何商业行为，仅供个人学习使用</strong></p>
          </el-collapse-item>
          <el-collapse-item title="用户协议" name="2">
            <ls>
              <li style="">接受条款：通过访问和使用本网站，您同意遵守以下使用条款和条件。如果您不同意这些条款，请立即停止使用本网站。</li>
              <li style="">禁止行为：您不得使用本网站进行任何非法、欺诈、恶意或破坏性的活动，包括但不限于发送垃圾邮件、散布病毒或恶意软件、侵犯他人权利或违反任何适用的法律或规定。</li>
              <li style="">终止：如果我们发现您违反了这些使用条款，我们有权随时终止您对本网站的访问和使用。</li>
            </ls>
          </el-collapse-item>
          <el-collapse-item title="隐私政策" name="3">
            <ls>
              <li style="text-align: start;">信息收集：当您访问本网站时，我们可能会收集有关您的信息，包括但不限于您的IP地址、浏览器类型、访问时间和访问的页面。此外，如果您注册或使用本网站上的某些功能，我们可能会要求您提供个人信息，如姓名、电子邮件地址和电话号码。</li>
              <li style="text-align: start;">信息使用：我们使用收集到的信息来改进我们的网站、提供更好的用户体验和个性化服务，以及进行内部研究和分析。我们不会将您的个人信息出售给第三方，但可能会与我们的合作伙伴共享这些信息，以便他们提供与我们的服务相关的服务。</li>
              <li style="text-align: start;">Cookie：我们可能会使用Cookie来跟踪您在本网站上的活动并存储您的偏好。您可以通过修改浏览器设置来禁用Cookie，但请注意，这可能会影响您在本网站上的体验。</li>
              <li style="text-align: start;">数据安全：我们采取适当的安全措施来保护您的个人信息免受未经授权的访问、使用或泄露。然而，由于互联网的性质，我们不能保证数据传输的安全性。</li>
              <li style="text-align: start;">第三方链接：本网站可能包含指向第三方网站的链接。我们不对这些第三方网站的内容、隐私政策或安全性负责。</li>
            </ls>
          </el-collapse-item>
          <el-collapse-item title="友情链接" name="4">
            <div><el-link href="http://www.ldy123.xyz/" type="primary" >大源火锅网:https://ldy123.xyz</el-link></div>
            <div><el-link href="https://inis.cc/" type="primary" >inis博客:https://inis.cc/</el-link></div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
<!-- end -->
  </div>
</template>

<script setup>
import Accounts  from "@/components/personal/accounts.vue";
import MyArticle from "@/components/personal/myarticle.vue";
import MyLike from "@/components/personal/mylike.vue";
import MyStar from "@/components/personal/mystar.vue";
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, shallowReactive} from "vue";
// 全局状态
import {useUserStore} from "/src/store/modules/user";
import {useRoute, useRouter} from "vue-router";
const store = useUserStore();
let component = shallowReactive(Accounts);
const router = useRouter()
const route = useRoute();
const state = reactive({
  display:1,
  // 这里的数组包含了要默认展开的el-collapse-item的name值
  activeNames: ['1','4']
})

const method = {
  init(){
    state.display = parseInt(route.query.index|| 1);
    if (state.display>4||state.display<0) state.display =1;
  },
  changeComponent:(Val)=> {
    switch (Val) {
      case 1:
        return Accounts;
      case 2:
        return MyArticle;
      case 3:
        return MyStar;
      case 4:
        return MyLike;
    }
  }
}

onBeforeMount(()=>{
  method.init();
})
</script>

<style scoped>
.main-container {
  width: 1200px;
}
.fade-enter,
.fade-leave-to {
  transition: opacity 0.2s;
}

.fade-enter-active,
.fade-leave-active {
  opacity: 0;
}

</style>
